<template>
	<v-container>
		<v-data-table :mobile-breakpoint="0" dense class="elevation-1" :items="data.list" :options="data.options" @update:options="data.update($event)" :headers="headers" :server-items-length="data.total" :loading="data.loading" hide-default-footer>
			<template v-slot:top>
				<v-toolbar flat color="white">
					<v-toolbar-title v-if="id>0">
						<v-avatar class="mr-2"><img :src="user.avatar" alt=""></v-avatar>{{user.name}}
					</v-toolbar-title>
					<v-toolbar-title v-else>{{name}}</v-toolbar-title>
					<v-spacer></v-spacer>
					<i-radio all :opts='["未匹配","已匹配"]' v-model="body.claim"></i-radio>
					<i-select label="平台" all :opts='["淘宝","天猫","京东","拼多多"]' v-model="body.user_type"></i-select>
					<v-text-field :label="`共${data.total}条`" v-model="s" class="ml-2" clearable></v-text-field>
					<v-btn color="success" @click="data.search()" class="ml-2">搜索</v-btn>
				</v-toolbar>
				<v-card flat v-show="id>0">
					<v-card-text>
						<v-row>
							<v-col>注册时间: <i-date :value="user.create_at"></i-date>
							</v-col>
							<v-col>最近登录: <i-date :value="user.login_at"></i-date>
							</v-col>
							<v-col>
								<span>返利: </span>
								{{user.rmb.toFixed(2)}}-{{user.rmbCost.toFixed(2)}}={{(user.rmb-user.rmbCost).toFixed(2)}}
							</v-col>
						</v-row>
					</v-card-text>
				</v-card>
			</template>
			<template v-slot:item.user_type="{item}">
				<img :src="user_type_logos[item.user_type]" width="24">
			</template>
			<template v-slot:item.pub_share_pre_fee="{item}">
				<span :style="{color:item.coupon_amount?'red':'green'}" style="line-height:48px;">{{item.pub_share_pre_fee}}</span>
			</template>
			<template v-slot:item.pay_amount="{item}">
				<span :style="{color:item.coupon_amount?'red':'green'}">{{item.pay_amount}}</span>
			</template>
			<template v-slot:item.create_at="{item}">
				<i-date :value="item.create_at" format="YYYY-MM-DD hh:mm"></i-date>
			</template>
			<template v-slot:item.earning_at="{item}">
				<i-date :value="item.earning_at" format="YYYY-MM-DD hh:mm"></i-date>
			</template>
			<template v-slot:item.total_commission_fee="{item}">
				<span v-if="item.total_commission_fee>0" style="color:green">已结算</span>
				<span v-else-if="item.alipay_total_price>0" style="color:blue">已付款</span>
				<span v-else style="color:red">已失效</span>
			</template>
			<template v-slot:item.uid="{item}">
				<v-avatar v-if="item.uid" :title="item.uid+'　'+$user.get(item.uid).name" @click="show(item.uid)" size="48">
					<img :src="$user.get(item.uid).avatar" alt="">
				</v-avatar>
				<v-btn v-else small text @click="claim(item)">认领</v-btn>
			</template>
			<template v-slot:item.tools="{item}">
				<v-btn color="green" @click="open(item)" small text>领取</v-btn>
			</template>
			<template v-slot:footer v-if="data.totalPage>1">
				<v-divider></v-divider>
				<i-page class="pa-2" circle :value="data.options.page-1" @input="data.options.page=$event+1" :total="data.total"></i-page>
			</template>
		</v-data-table>
	</v-container>
</template>
<script>
import UserInfo from './UserInfo';
export default {
	name: "PaymentList",
	props: {
		id: Number,
		name: String,
	},
	data() {
		return {
			s: "",
			data: new utils.DataSource(this.query).sortBy('create_at', true),
			user: {
				rmb: 0,
				rmbCost: 0,
			},
			body: {
				user_type: null,
			},
			user_type_logos: [
				"https://favicon.yandex.net/favicon/taobao.com",
				"https://favicon.yandex.net/favicon/taobao.com",
				"https://favicon.yandex.net/favicon/www.jd.com",
				"https://favicon.yandex.net/favicon/pinduoduo.com",
			]
		}
	},
	computed: {
		headers() {
			let list = [{
				value: "id",
				text: "#",
				width: 48,
			}, {
				value: "user_type",
				text: "平台",
				width: 40,
				sortable: false,
			}, {
				value: "trade_id",
				text: "交易号",
			}, {
				value: "title",
				text: "商品名称",
			}, {
				value: "pub_share_pre_fee",
				text: "收益",
				width: 58,
			}, {
				value: "pay_amount",
				text: "返利",
				width: 58,
			}, {
				value: "create_at",
				text: "下单时间",
				width: 82,
			}, {
				value: "earning_at",
				text: "签收时间",
				width: 82,
			}, {
				value: "total_commission_fee",
				text: "状态",
				width: 58,
			}, {
				value: "uid",
				text: "下单用户",
				width: 82,
			},];
			return this.id == null ? list : list.slice(0, -1);
		}
	},
	watch: {
		id() {
			this.data.search(0)
			this.refresh();
		},
		body: {
			deep: true,
			handler() {
				this.data.search();
			}
		}
	},
	methods: {
		async query(query) {
			query = Object.assign(query, {
				title: this.s,
				uid: this.id,
			}, this.body)
			let ret = await this.$get('payment/list', query)
			this.$user.addcache(ret.users);
			return ret;
		},
		show(uid) {
			this.$router.push(`/payment/` + uid);
		},
		async refresh() {
			let id = this.id;
			this.user = await this.$get('user/get', { id }, { ignore: true })
		},
		async claim(item) {
			let trade_id = item.trade_id.split('-');
			let type = trade_id.length < 2 ? 0 : 1;
			trade_id = trade_id[0]
			let body = await ivue.form({
				value: { trade_id, type },
				title: '!!!注意，认领操作无法撤销',
				params: {
					"uid": {
						"lbl": '请输入用户ID',
						"type": "int"
					}
				}
			});
			await this.$get('payment/claim', body)
			ivue.toast.success('认领成功');
			this.data.search();
		},
	},
	mounted() {
		this.refresh();
	},
	components: {

	},
}
</script>